<script>
import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';

export default {
  components: { GlAlert, GlSprintf, GlLink, ClipboardButton },
  props: {
    vulnerabilityLink: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isVisible: true,
    };
  },
  methods: {
    hideAlert() {
      this.isVisible = false;
    },
  },
  i18n: {
    alertTitle: __('Unable to create link to vulnerability'),
    alertMessage: __(
      'Manually link this issue by adding it to the linked issue section of the %{linkStart}originating vulnerability%{linkEnd}.',
    ),
    clipboardButtonText: __('Copy issue URL to clipboard'),
  },
  currentUrl: window.location.href,
};
</script>

<template>
  <gl-alert
    v-if="isVisible"
    variant="danger"
    :title="$options.i18n.alertTitle"
    class="gl-mt-4"
    @dismiss="hideAlert"
  >
    <p>
      <gl-sprintf :message="$options.i18n.alertMessage">
        <template #link="{ content }">
          <gl-link :href="vulnerabilityLink" target="_blank">{{ content }}</gl-link>
        </template>
      </gl-sprintf>
    </p>
    <clipboard-button
      :text="$options.currentUrl"
      :title="$options.i18n.clipboardButtonText"
      category="primary"
      variant="confirm"
    >
      {{ $options.i18n.clipboardButtonText }}
    </clipboard-button>
  </gl-alert>
</template>
